<!--
 * @Autor: 黄旗
 * @Date: 2020-07-17 09:00:14
-->
<template>
  <div>
    <Drawer
      :title="title"
      v-model="drawer"
      width="1200"
      @on-close="closeDrawer"
    >
      <jgSearch
        :searchData="searchData"
        @on-change-change="getDatas"
        @on-enter-input="inputaskData"
        @on-clear-input="inputaskData"
      >
        <template v-slot:city>
          <!-- <Select
                        v-model="params.area_code"
                        placeholder="请输入城市"
                        filterable
                        remote
                        clearable
                        :remote-method="remoteMethod"
                        :loading="loadingcity"
                        @on-change="askData"
                    >
                        <Option
                            v-for="(item, index) in optionscity"
                            :key="index"
                            :value="item.value"
                            :label="item.label"
                            >{{ item.label }}</Option
                        >
                    </Select> -->
          <jgcheckcity
            ref="checkcity"
            @cityvalue="cityvalue"
            v-model="area_code"
            :name="`patientdetails`"
          />
        </template>
      </jgSearch>
      <Table
        ref="table"
        highlight-row
        :columns="columns"
        :loading="loading"
        :data="data"
        @on-filter-change="handleFilterChange"
        @on-sort-change="sortchange"
      >
        <template slot-scope="{ row }" slot="info">
          <a @click="handleDetailPatient(row)">
            {{ row.user_name }} {{ row.gender_str }} {{ row.age }}
          </a>
        </template>
        <template slot-scope="{ row }" slot="diseases">
          <span>{{
            row.child_diseases_name
              ? row.child_diseases_name
              : row.diseases_name
          }}</span>
        </template>
        <template slot-scope="{ row }" slot="source">
          <span>{{
            row.child_source_name ? row.child_source_name : row.source_name
          }}</span>
        </template>
        <template slot="footer">
          <Page
            show-total
            show-elevator
            show-sizer
            :total="total"
            :current.sync="params.page"
            :page-size="params.pageSize"
            :page-size-opts="pageOpts"
            @on-change="changepage"
            @on-page-size-change="changepageSize"
            style="text-align: center;"
          />
        </template>
        <template slot-scope="{ row }" slot="action">
          <a
            @click="copypatient(row)"
            v-show="+row.repeat_type > 0"
            v-hasC="{
              name: 'v1-patient-index-repeat-list',
              flag: 'v1/patient/index/repeat-list',
            }"
          >
            重复
          </a>
        </template>
      </Table>
    </Drawer>
    <patient-detail
      ref="patientDetail"
      :btnShow="btnShow"
      @cancelDrawer="askData"
      @askData="askData"
    />
    <copymodal ref="copymodal" @askData="refreshData()" :btnShow="btnShows" />
  </div>
</template>

<script>
import {
  workpatientpatientdetail,
  workpatientgetparamslist,
} from "@api/hqapi/indextwo";
import { patientindexsearchcity } from "@/api/hqapi";
import jgSearch from "@/components/search";
// import jgcheckcity from "@/components/checkcity";
import patientDetail from "@/components/patientDetail";
import copymodal from "../../../patient/copymodal";
import mixincity from "@/mixins/mixincity";
export default {
  components: {
    jgSearch,
    patientDetail,
    copymodal,
  },
  mixins: [mixincity],
  name: "patientdetails",
  data() {
    return {
      btnShows: {
        name: "v1-patient-index-delete4",
        flag: "v1/patient/index/delete",
      },
      searchData: {
        project: [
          // { id: 1, key: 'DatePicker', format: 'yyyy-MM-dd', placeholder: '请选择创建时间', options: { disabledDate(date) { return date && date.valueOf() > Date.now() } }, style: { width: '200px' }, value: ['', ''], type: 'daterange', callback: 'change' },
          {
            id: 2,
            key: "Input",
            placeholder: "请输入患者姓名/手机号/微信号/唯一身份",
            clearable: true,
            style: { width: "270px" },
            value: "",
            callback: "input",
          },
          {
            id: 3,
            key: "TreeSelect",
            style: { minWidth: "100px" },
            placeholder: "病种",
            value: "",
            childList: [],
            clearable: true,
            callback: "change",
          },
          { id: 4, key: "slot", keys: "city" },
          // { id: 5, key: 'Select', style: { minWidth: '100px' }, placeholder: '患者状态', field: { value: 'id', label: 'status_name' }, value: '', childList: [], clearable: true, callback: 'change' },
          {
            id: 6,
            key: "TreeSelect",
            maxTagCount: 3,
            style: { minWidth: "100px" },
            placeholder: "渠道来源",
            multiple: true,
            value: [],
            childList: [],
            clearable: true,
            callback: "change",
          },
        ],
      },
      title: "",
      city_id: "",
      area_code: [],
      loading: false,
      loadingcity: false,
      total: 0,
      pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
      filterType: undefined,
      columns: [
        { title: "基本信息", fixed: "left", slot: "info", width: 180 },
        { title: "患者状态", key: "status_name", width: 100 },
        {
          title: "回访次数",
          key: "callback_count",
          sortable: "custom",
          width: 110,
        },
        {
          title: "上次回访时间",
          key: "last_callback_time_str",
          sortable: "custom",
          width: 140,
        },
        {
          title: "下次回访时间",
          key: "next_callback_time_str",
          sortable: "custom",
          width: 140,
        },
        {
          title: "未访天数",
          key: "uncallback_day",
          sortable: "custom",
          filteredValue: [],
          filters: [
            {
              label: "0-10天未访",
              value: "1",
            },
            {
              label: "11-20天未访",
              value: "2",
            },
            {
              label: "21-30天未访",
              value: "3",
            },
            {
              label: "31-60天未访",
              value: "4",
            },
            {
              label: "60天以上未访",
              value: "5",
            },
          ],
          filterMultiple: false,
          filterRemote(value) {
            this.filterType = value[0];
          },
          width: 130,
        },
        { title: "城市", key: "city_name", width: 110 },
        { title: "病种", slot: "diseases", width: 120 },
        { title: "对话方式", key: "dialog_mode_name", width: 120 },
        { title: "来源", slot: "source", width: 120 },
        {
          title: "备注",
          key: "remark",
          ellipsis: true,
          tooltip: true,
          minWidth: 250,
        },
        {
          title: "创建时间",
          key: "created_at_str",
          sortable: "custom",
          width: 150,
        },
      ],
      data: [],
      drawer: false,
      timer: null,
      optionscity: [],
      params: {
        page: 1,
        pageSize: 10,
        keywords: "",
        data_type: "",
        patient_diseases_id: "",
        city_id: "",
        patient_status_id: "",
        channel_id: "",
        not_callback_start: "",
        not_callback_end: "",
        start_time: "",
        end_time: "",
        sort_last_callback_time: 0,
        sort_callback_count: 0,
        sort_created_at: 0,
        sort_next_callback_time: 0,
      },
      paramsdata: {},
      btnShow: [
        {
          name: "patient-index-sub5",
          flag: "v1/patient/index/sub",
        },
        {
          name: "patient-index-edit-remark5",
          flag: "v1/patient/index/edit-remark",
        },
        {
          name: "v1-patient-index-update",
          flag: "v1/patient/index/update",
        },
        {
          name: "patient-callback-callback-common-list4",
          flag: "v1/patient/callback/callback-common-list",
        },
        {
          name: "patient-index-edit-tags10",
          flag: "v1/patient/index/edit-tags",
        },
        {
          name: "patient-index-edit-tags13",
          flag: "v1/patient/index/edit-tags",
        },
      ],
    };
  },
  methods: {
    cityvalue(city) {
      this.area_code = city;
      this.params.area_code = city.join(",");
      this.params.page = 1;
      this.askData();
    },
    refreshData() {
      this.askData();
    },
    initial() {
      // workpatientgetparamslist().then(res=>{
      //     this.searchData.project.forEach(item => {
      //         if (item.id === 3){
      //             item.childList = res.diseases_list
      //         }
      //         //  else if (item.id === 5){
      //         //     item.childList = res.patient_status
      //         // }
      //         else if (item.id === 6){
      //             item.childList = res.source_channel_list
      //         }
      //     })
      // })
      // this.askData()
    },
    patient(data, list) {
      if (data.data_type == "new_patient") {
        this.columns = [
          { title: "基本信息", fixed: "left", slot: "info", width: 180 },
          { title: "患者状态", key: "status_name", width: 100 },
          {
            title: "回访次数",
            key: "callback_count",
            sortable: "custom",
            width: 110,
          },
          {
            title: "上次回访时间",
            key: "last_callback_time_str",
            sortable: "custom",
            width: 140,
          },
          {
            title: "下次回访时间",
            key: "next_callback_time_str",
            sortable: "custom",
            width: 140,
          },
          {
            title: "未访天数",
            key: "uncallback_day",
            sortable: "custom",
            filteredValue: [],
            filters: [
              {
                label: "0-10天未访",
                value: "1",
              },
              {
                label: "11-20天未访",
                value: "2",
              },
              {
                label: "21-30天未访",
                value: "3",
              },
              {
                label: "31-60天未访",
                value: "4",
              },
              {
                label: "60天以上未访",
                value: "5",
              },
            ],
            filterMultiple: false,
            filterRemote(value) {
              this.filterType = value[0];
            },
            width: 130,
          },
          { title: "城市", key: "city_name", width: 110 },
          { title: "病种", slot: "diseases", width: 120 },
          { title: "对话方式", key: "dialog_mode_name", width: 120 },
          { title: "来源", slot: "source", width: 120 },
          {
            title: "备注",
            key: "remark",
            ellipsis: true,
            tooltip: true,
            minWidth: 250,
          },
          {
            title: "创建时间",
            key: "created_at_str",
            sortable: "custom",
            width: 150,
          },
          { title: "操作", slot: "action", width: 80, fixed: "right" },
        ];
      } else {
        this.columns = [
          { title: "基本信息", fixed: "left", slot: "info", width: 180 },
          { title: "患者状态", key: "status_name", width: 100 },
          {
            title: "回访次数",
            key: "callback_count",
            sortable: "custom",
            width: 110,
          },
          {
            title: "上次回访时间",
            key: "last_callback_time_str",
            sortable: "custom",
            width: 140,
          },
          {
            title: "下次回访时间",
            key: "next_callback_time_str",
            sortable: "custom",
            width: 140,
          },
          {
            title: "未访天数",
            key: "uncallback_day",
            sortable: "custom",
            filteredValue: [],
            filters: [
              {
                label: "0-10天未访",
                value: "1",
              },
              {
                label: "11-20天未访",
                value: "2",
              },
              {
                label: "21-30天未访",
                value: "3",
              },
              {
                label: "31-60天未访",
                value: "4",
              },
              {
                label: "60天以上未访",
                value: "5",
              },
            ],
            filterMultiple: false,
            filterRemote(value) {
              this.filterType = value[0];
            },
            width: 130,
          },
          { title: "城市", key: "city_name", width: 110 },
          { title: "病种", slot: "diseases", width: 120 },
          { title: "对话方式", key: "dialog_mode_name", width: 120 },
          { title: "来源", slot: "source", width: 120 },
          {
            title: "备注",
            key: "remark",
            ellipsis: true,
            tooltip: true,
            minWidth: 250,
          },
          {
            title: "创建时间",
            key: "created_at_str",
            sortable: "custom",
            width: 150,
          },
        ];
      }
      this.searchData.project.forEach((item) => {
        if (item.id === 3) {
          item.childList = list.diseases_list;
        }
        // else if (item.id === 5){
        //     item.childList = list.patient_status
        // }
        else if (item.id === 6) {
          item.childList = list.source_channel_list;
        }
      });
      this.paramsdata = data;
      this.params = {
        page: 1,
        pageSize: 10,
        keywords: "",
        data_type: data.data_type,
        patient_diseases_id: "",
        city_id: "",
        patient_status_id: data.patient_status_id,
        channel_id: "",
        belong_member_id: data.belong_member_id,
        not_callback_start: "",
        not_callback_end: "",
        start_time: data.time[0],
        end_time: data.time[1],
        sort_last_callback_time: 0,
        sort_callback_count: 0,
        sort_created_at: 0,
        sort_next_callback_time: 0,
      };
      this.searchData.project.forEach((item) => {
        if (item.id === 1) {
          item.value = data.time;
        }
      });
      this.askData();
      this.drawer = true;
    },
    askData() {
      this.loading = true;
      workpatientpatientdetail(this.params).then((res) => {
        this.data = res.list;
        this.total = res.total;
        this.loading = false;
        this.title = `我的${this.paramsdata.name}患者(${this.total})`;
      });
    },
    getDatas() {
      this.params.page = 1;
      this.searchData.project.forEach((item) => {
        // if (item.id === 1) {
        //     this.params.start_time = item.value[0]
        //     this.params.end_time = item.value[1]
        // } else
        if (item.id === 2) {
          this.params.keywords = item.value;
        } else if (item.id === 3) {
          this.params.patient_diseases_id = item.value;
        }
        // else if (item.id === 5) {
        //     this.params.patient_status_id = item.value
        // }
        else if (item.id === 6) {
          this.params.channel_id = item.value.join(",");
        }
      });
      this.askData();
    },
    inputaskData() {
      this.params.page = 1;
      this.params.pageSize = 10;
      this.params.data_type = "";
      this.params.patient_diseases_id = "";
      this.params.area_code = "";
      this.params.channel_id = "";
      this.params.not_callback_start = "";
      this.params.not_callback_end = "";
      this.params.sort_callback_count = 0;
      this.params.sort_created_at = 0;
      this.params.sort_last_callback_time = 0;
      this.params.sort_next_callback_time = 0;
      this.searchData.project.forEach((item) => {
        // if (item.id === 1) {
        //     item.value = ['', '']
        // } else
        if (item.id === 2) {
          this.params.keywords = item.value;
        } else if (item.id === 3) {
          item.value = "";
        } else if (item.id === 4) {
          item.value = "";
        }
        // else if (item.id === 5) {
        //     item.value = ''
        // }
        else if (item.id === 6) {
          item.value = [];
        }
      });
      this.askData();
    },
    handleFilterChange(value) {
      this.params.not_callback_start = "";
      this.params.not_callback_end = "";
      if (+value._filterChecked[0] === 1) {
        this.filteredValue = ["1"];
        this.params.not_callback_start = this.$Date()
          .subtract(10, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date().format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 2) {
        this.filteredValue = ["2"];
        this.params.not_callback_start = this.$Date()
          .subtract(20, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date()
          .subtract(11, "day")
          .format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 3) {
        this.filteredValue = ["3"];
        this.params.not_callback_start = this.$Date()
          .subtract(30, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date()
          .subtract(21, "day")
          .format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 4) {
        this.filteredValue = ["4"];
        this.params.not_callback_start = this.$Date()
          .subtract(60, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date()
          .subtract(31, "day")
          .format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 5) {
        this.filteredValue = ["5"];
        this.params.not_callback_start = "";
        this.params.not_callback_end = this.$Date()
          .subtract(61, "day")
          .format("YYYY-MM-DD");
      } else {
        this.params.not_callback_start = "";
        this.params.not_callback_end = "";
      }
      this.askData();
    },
    sortchange(e) {
      if (e.key === "callback_count") {
        if (e.order === "desc") {
          this.params.sort_callback_count = 2;
        } else if (e.order === "asc") {
          this.params.sort_callback_count = 1;
        } else {
          this.params.sort_callback_count = 0;
        }
        this.params.sort_next_callback_time = 0;
        this.params.sort_last_callback_time = 0;
        this.params.sort_created_at = 0;
      } else if (
        e.key === "uncallback_day" ||
        e.key === "last_callback_time_str"
      ) {
        if (e.order === "desc") {
          this.params.sort_last_callback_time = 2;
        } else if (e.order === "asc") {
          this.params.sort_last_callback_time = 1;
        } else {
          this.params.sort_last_callback_time = 0;
        }
        this.params.sort_next_callback_time = 0;
        this.params.sort_callback_count = 0;
        this.params.sort_created_at = 0;
      } else if (e.key === "created_at_str") {
        if (e.order === "desc") {
          this.params.sort_created_at = 2;
        } else if (e.order === "asc") {
          this.params.sort_created_at = 1;
        } else {
          this.params.sort_created_at = 0;
        }
        this.params.sort_last_callback_time = 0;
        this.params.sort_next_callback_time = 0;
        this.params.sort_callback_count = 0;
      } else if (e.key === "next_callback_time_str") {
        if (e.order === "desc") {
          this.params.sort_next_callback_time = 2;
        } else if (e.order === "asc") {
          this.params.sort_next_callback_time = 1;
        } else {
          this.params.sort_next_callback_time = 0;
        }
        this.params.sort_last_callback_time = 0;
        this.params.sort_created_at = 0;
        this.params.sort_callback_count = 0;
      }
      this.logs(e.key);
      this.params.page = 1;
      this.askData();
    },
    /* @函数功能: 分页 */
    changepage(e) {
      this.params.page = e;
      this.askData();
    },
    /* @函数功能: 每页数量 */
    changepageSize(e) {
      this.params.pageSize = e;
      this.askData();
    },
    defaultcityname() {
      this.optionscity = JSON.parse(JSON.stringify(this.defaultcity));
    },
    remoteMethod(query) {
      if (!this.cityfocusshow) return;
      clearTimeout(this.timer);
      if (query !== "") {
        let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (!reg.test(query)) {
          return;
        }
        this.loadingcity = true;
        return new Promise((resolve) => {
          this.timer = setTimeout(() => {
            patientindexsearchcity({
              keywords: query,
            }).then((res) => {
              this.query = "";
              if (res.list && res.list.length > 0) {
                let list = [];
                for (let item of res.list) {
                  list.push({
                    value: item.value,
                    label: item.label,
                  });
                }
                this.optionscity = list;
              }
              resolve(res.data);
            });
            this.loadingcity = false;
          }, 200);
        });
      }
    },
    handleDetailPatient(row) {
      this.$refs.patientDetail.handleOpen(row);
    },
    closeDrawer() {
      (this.params = {
        page: 1,
        pageSize: 10,
        keywords: "",
        data_type: "",
        patient_diseases_id: "",
        city_id: "",
        patient_status_id: "",
        channel_id: "",
        not_callback_start: "",
        not_callback_end: "",
        start_time: "",
        end_time: "",
        sort_last_callback_time: 0,
        sort_callback_count: 0,
        sort_created_at: 0,
        sort_next_callback_time: 0,
      }),
        this.searchData.project.forEach((item) => {
          if (item.id === 1) {
            item.value = ["", ""];
          } else if (item.id === 2) {
            item.value = "";
          } else if (item.id === 3) {
            item.value = "";
          } else if (item.id === 4) {
            item.value = "";
          } else if (item.id === 5) {
            item.value = "";
          } else if (item.id === 6) {
            item.value = [];
          }
        });
      this.$emit("askData");
    },
    copypatient(row) {
      this.$refs.copymodal.initial(row.id);
    },
  },
  /* 挂载完成能访问DOM元素 */
  mounted() {
    this.initial();
  },
};
</script>
<style lang="less"></style>
